<!--  -->
<template>
    <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <LeftMenu></LeftMenu>
      </el-aside>
      <el-container>
        <el-header>
         <Out></Out>
         </el-header>
        <el-main>

          <RouterView v-slot="{ Component }">
             <KeepAlive>
                  <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.name" />
              </KeepAlive>
              <component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.name" />
          </RouterView>
        
          <!-- <RouterView></RouterView> -->
         
        </el-main>
      </el-container>
    </el-container>
  </div>
 
</template>

<script lang='ts' setup>
import { reactive,toRefs,ref,onMounted} from 'vue'
import LeftMenu from '../../components/menu/LeftMenu.vue'
import Out from '../../components/header/Out.vue'
</script>
<style scoped>
.el-aside{
  background-color: skyblue;
  height: 100vh;
}
.el-header{
  background-color: red;
}
.el-main{
   
}
</style>